  <style>
    .connectedSortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 200px; }
    #tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
    </style>
<script type="text/javascript">
                                  // When the document is ready set up our sortable with it's inherant function(s)
   function showValues() {
      var order; 
      order = "&1="+ $("#m1").sortable('toArray');
      order = order +"&2="+ $("#m3").sortable('toArray');  
      order = order +"&menus=" + $("#menus").sortable('toArray'); 
       
      $("#info").load("http://voetbalpoule/test.php?"+order);
    }
   
   $(function() { 
       
       $( "#accordion" ).accordion({
            autoHeight: false,
            navigation: true
        });    
        
        
        $( ".connectedSortable" ).sortable({
              update : showValues}).disableSelection();
                      
         {foreach from=$posities item=positie} 
        var $tabs = $( "#{$positie->getNaam()}" ).tabs();
        $( "#{$positie->getNaam()}" ).find( ".ui-tabs-nav" ).sortable({ 
            axis: "x",
            update: showValues 
        }); 
          
        
        $( "#{$positie->getNaam()} span.ui-icon-close" ).live( "click", function() {
            var index = $( "li", $tabs ).index( $( this ).parent() );
            var order = $("#{$positie->getPositieId()}").sortable('toArray'); 
            $tabs.tabs( "remove", index );
            $("#info").load("http://voetbalpoule/test.php?index="+index+"&menu="+order);
        });
        
        
        
        var $tab_items = $( "ul:first li", $tabs ).droppable({
        accept: ".connectedSortable li",
        hoverClass: "ui-state-hover",
        drop: function( event, ui ) {

            var $id = ui.draggable.attr('id');

            var $item = $( this );

            var $list = $( $item.find( "a" ).attr( "href" ) )
                .find( ".connectedSortable" );

            ui.draggable.hide( "fast", function() {
                $( this ).appendTo( $list ).show( "fast" );
            });


            var $listname = $list.attr('id');
                {literal}
                $.get("http://voetbalpoule/test.php", {menu:$listname, module:$id}, function(data){ 
                {/literal}

                }); 



        }   
        
    });
    
     {/foreach}      
    });

</script>
 
 
 <form action="{$config.full_url}module/Positie/"><input type="submit" value="{$smarty.const.ADD_POSITIE_BUTTON}"></form><br>
{$message}
       
       <div id="accordion">
  {foreach from=$posities item=positie}
     <h3><a href="#">{$positie->getNaam()} - {$helper->getRank($positie->getRank())}</a></h3>
     <div>
      <div id="{$positie->getNaam()}">    
        <ul id="{$positie->getPositieId()}">
      
        {foreach from=$positie->getMenus() item=menu}
            <li id="{$menu->getMenuId()}"><a href="#{$menu->getNaam()}">{$menu->getNaam()}</a><span class="ui-icon ui-icon-close">Remove Tab</span></li>  
        {/foreach}
      </ul>
        {foreach from=$positie->getMenus() item=menu} 
            <div id="{$menu->getNaam()}">
                <ul id="m{$menu->getMenuId()}" class="connectedSortable ui-helper-reset">
                 {foreach from=$menu->getModules() item=module}
                    <li id="{$module->getModuleId()}" class="ui-state-default">{$module->getNaam()} - {$helper->getRank($module->getRank())}</li>
                 {/foreach}
                </ul>
            </div>
        {/foreach}

     
 </div>
 </div>
  {/foreach} 
  </div>
  
  <pre><div id="info"></div></pre>



